<template>
  <view class="content">
    <view class="loginBox">
      <h3>登录</h3>
      <view class="inputBox">
        <view class="ipt">
          <uni-icons type="contact" size="24" color="rgb(247,120,172)"></uni-icons>
          <input type="text" value="" placeholder="请输入账号" />
        </view>
        <view class="ipt">
          <uni-icons type="eye" size="24" color="rgb(247,120,172)"></uni-icons>
          <input type="passsword" value="" placeholder="请输入密码" />
        </view>
        <view class="forgetPwd">
          <span>忘记密码</span>
          <span>没有账号，去注册</span>
        </view>
        <button>登录</button>
      </view>
      <view class="tipbox">
        <view class="txt"> —— 其他账号登录 —— </view>
        <view class="otherUser">
          <uni-icons type="qq" size="40" color="rgb(66,157,250)"></uni-icons>
          <uni-icons type="weixin" size="40" color="rgb(2,187,17)"></uni-icons>
        </view>
      </view>
    </view>

    <view class="tip"> 某某应用 2024 </view>
  </view>
</template>

<script lang="ts" setup>
  import { FormRules } from 'wot-design-uni/components/wd-form/types';

  import { useAuth } from '@/hooks/useAuth';
  import { useI18n } from '@/locale/index';
  import { ProxyState, useProxyStore } from '@/store/modules/proxy';
  import { isHttpUrl } from '@/utils/is';

  const { t } = useI18n();
  const proxyStore = useProxyStore();

  const form = ref();

  const validator = (val: string) => {
    if (!val) {
      return Promise.reject(new Error(t('common.input')));
    }
    if (!isHttpUrl(val)) {
      return Promise.reject(new Error(t('common.formatError')));
    }
    return Promise.resolve();
  };
  const model = ref<ProxyState>({});
  const rules: FormRules = {
    api: [{ required: true, validator, message: '' }],
    'signin-': [{ required: true, validator, message: '' }],
    signalr: [{ required: true, validator, message: '' }],
    file: [{ required: true, validator, message: '' }],
    upload: [{ required: true, validator, message: '' }],
  };

  onMounted(() => {
    model.value = { ...proxyStore.state };
  });

  function handleOk() {
    form.value
      .validate()
      .then(({ valid }) => {
        if (valid) {
          proxyStore.state = { ...proxyStore.state, ...model.value };
          handleCancel();
        }
      })
      .catch((error: any) => {
        console.error(error);
      });
  }

  function handleCancel() {
    uni.navigateBack();
  }
</script>

<style lang="scss" scoped>
  @import './index';
  .content {
    height: 100vh;
    background: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202005%2F10%2F20200510005139_JR8fL.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1714820289&t=e835cde99a094cbd98f9c318f25160ec')
      no-repeat;
    background-size: 100% 100%;
  }
  .loginBox {
    position: absolute;
    top: 50%;
    left: 50%;
    box-sizing: border-box;
    width: 90%;
    padding: 60rpx;
    background-color: #fff;
    border-radius: 20rpx;
    transform: translate(-50%, -60%);
  }
  h3 {
    margin-bottom: 40rpx;
    font-size: 40rpx;
    color: rgb(247, 120, 172);
    letter-spacing: 10rpx;
  }
  /* .inputBox {
  } */

  .ipt {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 86rpx;
    padding-left: 10rpx;
    margin-bottom: 20rpx;
    background-color: #f5f5f5;
    border-radius: 10rpx;
  }
  .ipt input {
    margin-left: 20rpx;
    font-size: 28rpx;
  }
  .ipt input {
    margin-left: 20rpx;
  }
  .forgetPwd {
    display: flex;
    justify-content: space-between;
    padding: 0 10rpx;
    font-size: 26rpx;
    color: #b5b5b5;
    text-align: end;
  }
  button {
    margin-top: 40rpx;
    line-height: 85rpx;
    color: #fff;
    text-align: center;
    background: linear-gradient(to right, rgb(255, 170, 127), rgb(247, 120, 172));
    border-radius: 40rpx;
  }

  .tip {
    position: fixed;
    bottom: 50rpx;
    left: 50%;
    font-size: 28rpx;
    color: #f4f4f4;
    text-align: center;
    transform: translate(-50%, -50%);
  }
  .tipbox {
    margin-top: 100rpx;
    text-align: center;
  }

  .otherUser {
    display: flex;
    justify-content: center;
    margin-top: 30rpx;
  }

  .txt {
    font-size: 28rpx;
    color: #cbcbcb;
  }

  .otherUser .uni-icons {
    margin-left: 20rpx;
  }
</style>
